<template>
	<cover-view class="popup-container" v-show="show" @click="close">
		<cover-view class="popup-main">
			<cover-view class="popup-inner" @click.stop>
				<cover-image class="popup-bg" :src="staticImgs.bg" @click.stop />
				<cover-image :class="['popup-btn']" @click.stop="toScl" :src="staticImgs.btn" />
				<cover-image :src="staticImgs.close" class="close" @click.stop="close" />
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import {
		chakraSclInfo
	} from "@/common/api/scl_api";

	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				staticImgs: {
					bg: this.$imgWxkjUrl + '/product/mailun_popup_bg_new_new.png',
					btn: this.$imgWxkjUrl + '/product/mailun_popup_btn.png',
					close: this.$imgWxkjUrl + '/product/mailun_popup_close.png'
				},
				detail: null
			}
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					this.show = val
					if (val) {
						chakraSclInfo().then(res => {
							this.detail = res.data.data
						})
					}
				}
			}
		},
		methods: {
			close() {
				this.show = false
				this.$emit('input', false)
				this.$emit('close')
			},
			toScl() {
				if (!this.detail) {
					return
				}
				this.show = false
				this.$emit('input', false)
				// if (this.detail.reportId) {
				// 	uni.navigateTo({
				// 		url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.detail.reportId
				// 	})
				// } else {
					
				// }
				if (this.sourceType) {
					this.$u.api.addLog({
						sclId: this.detail.sclId,
						sourseType: this.sourceType
					})
				}
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/introduce/introduce?sclId=' + this.detail.sclId +
						'&merchandiseId=' + this.detail.merchandiseId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup-container {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		overflow: hidden;
		background-color: rgba(50, 50, 50, 0.7);
	}

	.popup-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 844rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}

	.popup-inner {
		width: 516rpx;
		height: 844rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: visible;
	}

	.popup-bg {
		width: 516rpx;
		height: 776rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.popup-btn {
		position: absolute;
		left: 0;
		right: 0;
		top: 678rpx;
		margin: 0 auto;
		width: 374rpx;
		height: 166rpx;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}


	.close {
		width: 45rpx;
		height: 45rpx;
		top: 15rpx;
		right: 15rpx;
		position: absolute;
	}
</style>